<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件高级</title>
</head>

<body>
    <button>1</button>
    <button>2</button>
    <button>3</button>
</body>
<script>
    var btns = document.querySelectorAll('button')
    btns[0].addEventListener('click', function () {
        alert(22)
    })
    btns[0].addEventListener('click', function () {
        alert(33)

    })
    // 传统方式删除事件
    btns[1].onclick = function () {
        alert(44)
        btns[1].onclick = null;
    }
    // 方法监听删除方式
    // 方法①（重点掌握）removeEventListener
    // 把fn函数写到外面，注册事件时直接调用函数fn，
    // 删除事件再直接调用就行，此时调用不用写括号
    // 方法②（ie9之前适用）detachEvent
    function fn() {
        alert(88)
        btns[2].removeEventListener('mouseover', fn)
    }
    btns[2].addEventListener('mouseover', fn)
</script>
<!-- 
    注册事件
    即给元素添加事件，注册事件有两种方式
    1.传统方式（之前已学）
    利用on开头的事件onclick
    注册事件的唯一性
    同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数会覆盖前面注册的事件处理函数
    
    2.方法监听注册方式
    方法①addEventListener()
    eventTarget.addEventListener(type,listener[,useCapture])
    同一个元素  同一个事件可以添加多个侦听器（事件处理程序）
    法②attachEvent()（ie9以前的版本才支持）
    使用方法与addEventListener()一模一样

    删除事件
    1.传统注册方式：  eventTarget.onclick=null
    2.方法监听注册方式：  eventTarget.removeEventListener(type,listener[,useCapture])

 -->

</html>